<template>
  <div class="page">
    <a-form
      :model="formSearchParams"
      :style="{ marginBottom: '20px' }"
      layout="inline"
      @submit="doSearch"
    >
      <a-form-item field="userName" label="预约标题">
        <a-input v-model="formSearchParams.title" placeholder="请输入标题" />
      </a-form-item>
      <a-form-item field="userProfile" label="预约人姓名">
        <a-input v-model="formSearchParams.username" placeholder="请输入姓名" />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" html-type="submit" style="width: 100px">
          搜索
        </a-button>
      </a-form-item>
    </a-form>
    <div class="box">
      <a-table
        :columns="columns"
        :data="dataList"
        :pagination="{
          showTotal: true,
          pageSize: searchParams.pageSize,
          current: searchParams.current,
          total,
        }"
        @page-change="onPageChange"
      >
        <template #userAvatar="{ record }">
          <a-image width="64" :src="record.userAvatar" />
        </template>
        <template #createTime="{ record }">
          {{ dayjs(record.createTime).format("YYYY-MM-DD HH:mm:ss") }}
        </template>
        <template #updateTime="{ record }">
          {{ dayjs(record.updateTime).format("YYYY-MM-DD HH:mm:ss") }}
        </template>
        <template #optional="{ record }">
          <a-space>
            <a-button type="outline" @click="handleClick(record.id)"
              >制定计划</a-button
            >
            <a-button status="danger" @click="doDelete(record)">删除</a-button>
          </a-space>
        </template>
      </a-table>
    </div>
    <a-drawer
      :width="500"
      :visible="visible"
      @ok="handleOk"
      @cancel="handleCancel"
      unmountOnClose
    >
      <template #title> 制定工作计划 </template>
      <div>
        <a-form :style="{ width: '400px' }" :model="workPlanData">
          <a-form-item
            field="name"
            tooltip="项目分工，如：浇灌"
            label="项目模块"
          >
            <a-input
              placeholder="请输入项目模块"
              v-model="workPlanData.projectModules"
            />
          </a-form-item>
          <a-form-item field="post" label="工作事项">
            <a-input
              placeholder="请输入工作事项"
              v-model="workPlanData.workItems"
            />
          </a-form-item>
          <a-form-item field="post" label="优先级">
            <a-input
              placeholder="请输入优先级"
              v-model="workPlanData.priority"
            />
          </a-form-item>
          <a-form-item field="post" label="工作详情">
            <a-input
              placeholder="请输入工作详情"
              v-model="workPlanData.workDetails"
            />
          </a-form-item>
          <a-form-item>
            <a-button html-type="submit" @click="addWorkPlanUsingPostData()"
              >提交</a-button
            >
          </a-form-item>
        </a-form>
      </div>
    </a-drawer>
  </div>
</template>

<script setup>
import { ref, watchEffect } from "vue";
import message from "@arco-design/web-vue/es/message";
import { dayjs } from "@arco-design/web-vue/es/_utils/date";
import {
  deleteAppointmentsUsingPost,
  getAppointmentsVoByIdUsingGet,
  listAppointmentsByPageUsingPost,
} from "@/api/appointmentsController";
import { addWorkPlanUsingPost } from "@/api/workPlanController";
const appData = ref();
const visible = ref(false);
const idid = {
  id: "",
};
const handleClick = (id) => {
  idid.id = id;
  workPlanData.value.projectId = id;
  visible.value = true;
  getAppointmentsVoByIdUsingGetData();
};
const handleOk = () => {
  visible.value = false;
};
const handleCancel = () => {
  visible.value = false;
};

const formSearchParams = ref({});

// 初始化搜索条件（不应该被修改）
const initSearchParams = {
  current: 1,
  pageSize: 10,
};

const searchParams = ref({
  ...initSearchParams,
});
const dataList = ref([]);

const total = ref(0);

const getAppointmentsVoByIdUsingGetData = async () => {
  const res = await getAppointmentsVoByIdUsingGet(idid);
  if (res.data.code === 0) {
    appData.value = res.data.data;
  } else {
    message.error(res.data.message);
  }
};

/**
 * 加载数据
 */
const loadData = async () => {
  const res = await listAppointmentsByPageUsingPost(searchParams.value);
  if (res.data.code === 0) {
    dataList.value = res.data.data?.records || [];
    total.value = res.data.data?.total || 0;
  } else {
    message.error("获取数据失败，" + res.data.message);
  }
};

/**
 * 执行搜索
 */
const doSearch = () => {
  searchParams.value = {
    ...initSearchParams,
    ...formSearchParams.value,
  };
};

/**
 * 当分页变化时，改变搜索条件，触发数据加载
 * @param page
 */
const onPageChange = (page) => {
  searchParams.value = {
    ...searchParams.value,
    current: page,
  };
};

/**
 * 删除
 * @param record
 */
const doDelete = async (record) => {
  if (!record.id) {
    return;
  }
  const res = await deleteAppointmentsUsingPost({
    id: record.id,
  });
  if (res.data.code === 0) {
    loadData();
  } else {
    message.error("删除失败，" + res.data.message);
  }
};

const workPlanData = ref({
  projectId: 0,
  projectModules: "",
  priority: "",
  workDetails: "",
  workItems: "",
});
const addWorkPlanUsingPostData = async () => {
  const res = await addWorkPlanUsingPost(workPlanData.value);
  if (res.data.code == 0) {
    message.success(res.data.message);
  } else {
    message.error("添加失败" + res.data.message);
  }
};
/**
 * 监听 searchParams 变量，改变时触发数据的重新加载
 */
watchEffect(() => {
  loadData();
});
// 表格列配置
const columns = [
  {
    title: "id",
    dataIndex: "id",
    ellipsis: true,
    tooltip: true,
    width: 100,
  },
  {
    title: "姓名",
    dataIndex: "username",
  },
  {
    title: "标题",
    dataIndex: "title",
  },
  {
    title: "详情",
    dataIndex: "content",
    ellipsis: true,
    tooltip: true,
    width: 100,
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
    slotName: "createTime",
  },
  {
    title: "更新时间",
    dataIndex: "updateTime",
    slotName: "updateTime",
  },
  {
    title: "操作",
    slotName: "optional",
  },
];
</script>

<style scoped>
.page {
  width: 100%;
  height: 100%;
  padding: 20px;
}
.box {
  width: 97%;
  height: 100%;
}
</style>
